﻿<template>
  <div class="order-info">
    <!-- 订单头部信息 -->
    <div class="order-info-item">
      <div class="item-left">
        <span class="order-info-item-label">订单编号：</span>
        <span class="order-info-item-value">{{ orderData.orderNo }}</span>
        <base-icon name="iconfont ic-fuzhi" @click="handleCopy(orderData.orderNo)" color="var(--ct4)" :size="14" />
        <el-divider direction="vertical" />
        <div class="order-info-tag">
          <span>{{ orderData.deliveryType }}</span>
          <div class="icon">
            <base-icon name="iconfont ic-youjiantouxiao" color="var(--bg)" :size="10" />
          </div>
        </div>
      </div>
      <div class="item-right" @click="handleViewProgress">
        <span>查看订单进度</span>
        <base-icon name="iconfont ic-youjiantouxiao" color="var(--bd)" :size="14"></base-icon>
      </div>
    </div>

    <!-- 动态渲染信息区块 -->
    <div v-for="section in orderSections" :key="section.title" class="order-info-section">
      <div class="order-info-title">{{ section.title }}</div>
      <div class="info-grid">
        <div
          v-for="item in section.items"
          :key="item.label"
          class="info-item"
          :class="{ 'info-item--full': item.fullWidth }"
        >
          <span class="info-label">{{ item.label }}</span>
          <span class="info-value">{{ item.value || "-" }}</span>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="order-info-section">
      <div class="order-info-title">商品信息</div>
      <div class="product-table-wrapper">
        <el-table :data="orderData.products" :show-header="true" class="product-table" ref="productTableRef">
          <el-table-column label="商品图片" width="200" align="left">
            <template #default="{ row }">
              <div class="product-image-cell">
                <img :src="row.image || '/placeholder.png'" :alt="row.name" />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="商品名称" align="left">
            <template #default="{ row }">
              <div class="product-name-cell">{{ row.name }}</div>
            </template>
          </el-table-column>

          <el-table-column label="商品编号" align="left">
            <template #default="{ row }">
              <div class="product-sku-cell">{{ row.sku }}</div>
            </template>
          </el-table-column>

          <el-table-column label="规格颜色" align="left">
            <template #default="{ row }">
              <div class="product-spec-cell">{{ row.spec }}</div>
            </template>
          </el-table-column>

          <el-table-column label="数量" align="left">
            <template #default="{ row }">
              <div class="product-quantity-cell">{{ row.quantity }}</div>
            </template>
          </el-table-column>

          <el-table-column label="买断规则" align="left">
            <template #default="{ row }">
              <div class="product-buyout-cell">{{ row.buyoutRule }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 租用信息（放置在商品信息和增值服务之间） -->
    <div class="order-info-section">
      <div class="order-info-title">租用信息</div>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">租用天数</span>
          <span class="info-value">{{ orderData.rentDays || "-" }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">起租时间</span>
          <span class="info-value">{{ orderData.rentStartTime || "-" }}</span>
        </div>
        <div class="info-item info-item--full">
          <span class="info-label">归还时间</span>
          <span class="info-value">{{ orderData.returnTime || "-" }}</span>
        </div>
      </div>
    </div>

    <!-- 增值服务 -->
    <div class="order-info-section">
      <div class="order-info-title">增值服务</div>
      <div class="product-table-wrapper">
        <el-table :data="valueAddedServices" :show-header="true" class="product-table">
          <el-table-column label="增值服务ID" width="200" align="left">
            <template #default="{ row }">{{ row.id }}</template>
          </el-table-column>
          <el-table-column label="增值服务名称" align="left">
            <template #default="{ row }">{{ row.name }}</template>
          </el-table-column>
          <el-table-column label="增值服务价格" width="200" align="left">
            <template #default="{ row }">{{ row.price }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 商家备注 -->
    <div class="order-info-section">
      <div class="order-info-title">商家备注</div>
      <div class="product-table-wrapper">
        <el-table :data="merchantRemarks" :show-header="true" class="product-table">
          <el-table-column label="备注人姓名" width="220" align="left">
            <template #default="{ row }">{{ row.operatorName }}</template>
          </el-table-column>
          <el-table-column label="备注时间" width="220" align="left">
            <template #default="{ row }">{{ row.remarkTime }}</template>
          </el-table-column>
          <el-table-column label="备注内容" align="left">
            <template #default="{ row }">
              <div class="remark-content-cell">{{ row.remarkContent }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 平台备注 -->
    <div class="order-info-section">
      <div class="order-info-title">平台备注</div>
      <div class="product-table-wrapper">
        <el-table :data="platformRemarks" :show-header="true" class="product-table">
          <el-table-column label="备注人姓名" width="220" align="left">
            <template #default="{ row }">{{ row.operatorName }}</template>
          </el-table-column>
          <el-table-column label="备注时间" width="220" align="left">
            <template #default="{ row }">{{ row.remarkTime }}</template>
          </el-table-column>
          <el-table-column label="备注内容" align="left">
            <template #default="{ row }">
              <div class="remark-content-cell">{{ row.remarkContent }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
  // 定义 props
  const props = defineProps({
    orderData: {
      type: Object,
      default: () => ({
        orderNo: "1234567890",
        deliveryType: "平台代发",
        // 租用信息
        rentDays: 365,
        rentStartTime: "2025-09-11 00:00:00",
        returnTime: "2025-09-11 00:00:00",
        guarantor: {
          merchantName: "青云租",
          merchantPhone: "-",
          idCard: "-",
          agreement: "无",
          creditAuth: "无",
          status: "-",
        },
        consignee: {
          name: "刘**",
          phone: "131****3859",
          address: "北京北京市东城区**",
          remark: "无",
          buyoutAmount: "-",
        },
        merchant: {
          name: "栗子uat测试店铺",
          phone: "07310828",
        },
        products: [
          {
            id: 1,
            name: "Apple/苹果 iPad Air(第 5 代)10.9英寸平板WI-FI 蜂窝版2022年(64G 5G版/...",
            image: "/placeholder.png",
            sku: "12345678900987654321",
            spec: "蓝色/64G WLAN版",
            quantity: 1,
            buyoutRule: "支持提前买断",
          },
        ],
        // 底部表格示例数据
        valueAddedServices: [{ id: 51, name: "Geoff测试", price: 100 }],
        merchantRemarks: [
          { operatorName: "商家A", remarkTime: "2025-09-11 00:00:00", remarkContent: "备注内容备注内容备注内容" },
        ],
        platformRemarks: [
          { operatorName: "平台B", remarkTime: "2025-09-11 00:00:00", remarkContent: "平台备注内容平台备注内容" },
        ],
      }),
    },
  });

  // 计算属性：动态生成信息区块
  const orderSections = computed(() => [
    {
      title: "担保人信息",
      items: [
        { label: "担保方商户名", value: props.orderData.guarantor?.merchantName },
        { label: "担保方商户注册手机号", value: props.orderData.guarantor?.merchantPhone },
        { label: "担保身份证", value: props.orderData.guarantor?.idCard },
        { label: "企业租赁担保协议", value: props.orderData.guarantor?.agreement },
        { label: "担保人征信授权", value: props.orderData.guarantor?.creditAuth },
        { label: "担保状态", value: props.orderData.guarantor?.status },
      ],
    },
    {
      title: "收货人信息",
      items: [
        { label: "收货人姓名", value: props.orderData.consignee?.name },
        { label: "收货人手机号", value: props.orderData.consignee?.phone },
        { label: "用户备注", value: props.orderData.consignee?.remark },
        { label: "买断款", value: props.orderData.consignee?.buyoutAmount },
        { label: "收货人地址", value: props.orderData.consignee?.address, fullWidth: true },
      ],
    },
    {
      title: "商家信息",
      items: [
        { label: "商家信息", value: props.orderData.merchant?.name },
        { label: "商家电话", value: props.orderData.merchant?.phone },
      ],
    },
  ]);

  // 底部表格数据（可能为多条），与后端字段解耦，空数组兜底
  const valueAddedServices = computed(() => props.orderData.valueAddedServices || []);
  const merchantRemarks = computed(() => props.orderData.merchantRemarks || []);
  const platformRemarks = computed(() => props.orderData.platformRemarks || []);

  // 事件上抛：查看订单进度
  const emit = defineEmits(["open-progress"]);

  // 复制订单号
  const handleCopy = text => {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        $msg.success("复制成功");
      })
      .catch(() => {
        $msg.error("复制失败");
      });
  };

  // 查看订单进度
  const handleViewProgress = () => {
    console.error("1111");
    emit("open-progress");
  };
</script>

<style lang="scss" scoped>
  .order-info {
    :deep(.el-divider--vertical) {
      margin: 0 12px;
    }
    .order-info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 13px 16px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      background: linear-gradient(360deg, var(--bg) 0%, var(--bd9) 100%);
      .item-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        .order-info-item-label {
          font-size: 12px;
          color: var(--ct3);
          line-height: 20px;
        }
        .order-info-item-value {
          font-size: 12px;
          color: var(--ct1);
          margin-right: 4px;
          line-height: 20px;
        }
        .order-info-tag {
          display: flex;
          align-items: center;
          gap: 2px;
          padding: 2.5px 8px;
          font-size: 12px;
          color: #c45b2b;
          position: relative;
          border: 1px solid transparent; // 必须透明

          border-radius: 4px;
          background: linear-gradient(90deg, #fff4dd 0%, #ffd9bf 100%);
          background-clip: padding-box; // 让背景按圆角裁剪
          -webkit-background-clip: padding-box; // 兼容

          .icon {
            position: relative;
            border-radius: 100px;
            width: 12px;
            height: 12px;
            background: linear-gradient(90deg, #fec37f -65.71%, #f37f49 118.57%);

            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .item-right {
        font-size: 14px;
        display: flex;
        line-height: 22px;
        align-items: center;
        gap: 4px;
        color: var(--bd);
        cursor: pointer;
      }
    }
  }
  .order-info-section {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .order-info-title {
    position: relative;
    padding-left: 11px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ct1);

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--bd) 0%, var(--bd) 100%);
    }
  }

  // 信息网格样式 - 使用 CSS Grid 更优雅
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--cb1);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cb1);
    .info-item {
      background: white;

      display: flex;
      align-items: center;

      // 跨列显示（如收货人地址）
      &--full {
        grid-column: 1 / -1;
      }

      .info-label {
        padding: 9px 12px;
        font-size: 14px;
        color: var(--ct2);
        background-color: var(--fl1);
        min-width: 170px;
        flex-shrink: 0;
        box-sizing: border-box;
        border-right: 1px solid var(--cb1);
      }

      .info-value {
        padding: 9px 12px;
        font-size: 14px;
        color: var(--ct2);
        flex: 1;
        background-color: var(--bg);
      }
    }
  }

  // 商品表格样式
  .product-table-wrapper {
    border-radius: 8px;
    overflow: hidden;
    // border: 1px solid var(--cb1);
  }

  .product-table {
    // 商品图片样式
    .product-image-cell {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        object-fit: cover;
        background: #f5f5f5;
      }
    }

    // 商品名称样式
    .product-name-cell {
      font-size: 14px;
      color: var(--ct2);
      line-height: 1.4;

      word-break: break-all;
    }

    // 其他单元格样式
    .product-sku-cell,
    .product-spec-cell,
    .product-quantity-cell,
    .product-buyout-cell {
      font-size: 14px;
      color: var(--ct2);
      text-align: left;
    }

    .remark-content-cell {
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
  :deep(.el-table__inner-wrapper:before) {
    display: none;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: var(--bg);
  }
  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
    border-bottom: none;
  }
  :deep(.el-table__header) {
    th {
      background: #f5f5f5 !important;
      font-weight: 600;
      height: 48px;
      color: var(--ct1);
      font-size: 14px;
    }
  }

  :deep(.el-table__body) {
    tr {
      background: white;
      td {
        height: 84px;
        font-size: 14px;
        color: var(--ct2);
      }
    }
  }
</style>
